<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/assets/css/login_css.css">
    <title>登录 - 选课系统</title>
</head>
<body>
    <div class="container">
        <div class="row tips col-lg-offset-3 col-xs-offset-3 col-md-offset-3 col-lg-6 col-md-6 col-xs-4">
            <h1>登录到选课系统</h1>
        </div>
        <div class="row">
            <div class="col-lg-6 col-xs-offset-3 col-md-offset-3 col-lg-offset-3 col-md-6 col-xs-6">
                <div class="jumbotron">
                    <div class="input-group">
                        <span class="input-group-addon">学号</span>
                        <input type="text" class="form-control" id="sid" placeholder="请输入你的学号" >
                        <span class="alert alert-danger tips-sid"></span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">密码</span>
                        <input type="password" class="form-control" id="password" placeholder="请输入你的密码" >
                        <span class="alert alert-danger tips-password"></span>
                    </div>
                    <div class="input-group col-lg-offset-5">
                        <input type="button" class="form-control btn btn-success" id="form-submit" value="提交" >
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script src="/assets/js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        $('#sid').on('focus', function () {
            $('.tips-sid').hide()
        })

        $('#password').on('focus', function () {
            $('.tips-password').hide()
        })


        $('#form-submit').click(function () {
            var sid = $('#sid').val();
            var password = $('#password').val();
            if (sid === '') {
                $('.tips-sid').show().html('你还没有输入学号！')
                return
            }
            if (password === '') {
                $('.tips-password').show().html('你还没有输入密码！')
                return
            }

            //验证登录
            $.ajax({
                url: '/login',
                type: 'post',
                data: {
                    sid,
                    password
                },
                success (data) {
                    if (data.result === -2) {
                        $('.tips-sid').show().html('学号不存在，请检查你的学号！')
                    }else if (data.result === -3) {
                        $('.tips-password').show().html('密码输入不正确！')
                    } else if (data.result === 1) {
                        alert('登录成功')
                        window.location.href = '/'
                    }
                }
            })
        })

        // 加载页面动画效果
        $('.container').animate({
            marginTop: 150,
            opacity: .9
        }).slideDown('slow')
    })
</script>